<template>
    <div>
        <el-button
            type="success"
            size="default"
            @click="submit"
            icon="el-icon-position"
            class="bc"
        >保存</el-button>

        <el-form :model="form" ref="form" label-width="120px" size="normal">
            <el-tabs v-model="activeName">
                <el-tab-pane label="基本信息" name="first">
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="5">
                            <el-form-item label="站点名称" size="normal">
                                <el-input v-model="form.webname" size="normal"></el-input>
                            </el-form-item>
                            <el-form-item label="站点域名" size="normal">
                                <el-input v-model="form.weburl" size="normal"></el-input>
                            </el-form-item>
                            <el-form-item label="站点logo" size="normal">
                                <el-upload
                                    class="upload-demo"
                                    action="api/upload"
                                    list-type="picture"
                                    :headers="headers"
                                    show-file-list
                                >
                                    <el-button size="small" type="warning">点击上传</el-button>
                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="SEO配置" name="second">
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="5">
                            <el-form-item label="站点关键字" size="normal">
                                <el-input
                                    v-model="form.webkeys"
                                    size="normal"
                                    type="textarea"
                                    resize="none"
                                    :autosize="{ minRows: 3 }"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="站点描述" size="normal">
                                <el-input
                                    v-model="form.webdesc"
                                    size="medium"
                                    type="textarea"
                                    resize="none"
                                    :autosize="{ minRows: 6 }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="站点信息" name="third">
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="5">
                            <el-form-item label="公司名称" size="normal">
                                <el-input v-model="form.webgsname" size="normal"></el-input>
                            </el-form-item>
                            <el-form-item label="公司地址" size="normal">
                                <el-input v-model="form.webgsdz" size="normal"></el-input>
                            </el-form-item>
                            <el-form-item label="公司邮编" size="normal">
                                <el-input v-model="form.wbgsyb" size="normal"></el-input>
                            </el-form-item>
                            <el-form-item label="公司电话" size="normal">
                                <el-input v-model="form.webgsdh" size="normal"></el-input>
                            </el-form-item>
                            <el-form-item label="联系QQ" size="normal">
                                <el-input v-model="form.webgsqq" size="normal"></el-input>
                            </el-form-item>
                            <el-form-item label="版权信息" size="normal">
                                <el-input
                                    v-model="form.webbqxx"
                                    size="normal"
                                    type="textarea"
                                    resize="none"
                                    :autosize="{ minRows: 3 }"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="备案信息" size="normal">
                                <el-input
                                    v-model="form.webbaxx"
                                    size="normal"
                                    type="textarea"
                                    resize="none"
                                    :autosize="{ minRows: 3 }"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="统计代码" size="normal">
                                <el-input
                                    v-model="form.webtjdm"
                                    size="normal"
                                    type="textarea"
                                    resize="none"
                                    :autosize="{ minRows: 4 }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                webname: "", // 网站标题
                webdesc: "", // 网站描述
                webkeys: "", //网站关键字
                weblogo: "", //logo服务器地址
                webbqxx: "", // 版权信息
                webid: 1, // 网站id
                weburl: "", // 网站网址
                webgsname: "", // 公司名称
                webgsdz: "", // 公司地址
                wbgsyb: "", // 公司邮编
                webgsdh: "", //公司电话
                webgsqq: "", // 公司QQ
                webbaxx: "", // 备案信息
                webtjdm: "", // 统计代码
                websrc: "", // logo可用地址
            },
            activeName: "first",
            headers: "",
            filelist: [],
        };
    },
    created() {
        this.headers = {
            Authorization: JSON.parse(localStorage.getItem("userinfo")).token,
        };
        this.getWebInfo();
    },
    methods: {
        async beforeUpload(file) {
            console.log(file);
            console.log(this.filelist);
            let { data: res } = await this.$axios.post("api/upload", {
                img: file,
            });

            console.log(res);
        },
        // 获取信息列表
        async getWebInfo() {
            let { data: res } = await this.$axios.get("api/webset");
            if (res.code !== 200) return this.$message.error(res.msg);
            this.form = {
                ...res.data,
            };
        },
        async submit() {
            let { data: res } = await this.$axios.post(
                "api/webset",
                Object.assign(this.form, { act: "edit" })
            );
            if (res.code !== 200) return this.$message.error(res.msg);
            this.$message.success("修改成功");
        },
    },
};
</script>

<style scoped >
.upload-demo {
    text-align: left;
}
.bc {
    position: absolute;
    right: 20px;
    top: 70px;
    z-index: 99;
}
</style>